<template>
  <div>
    <h1>customRef</h1>
    <h1>{{keyWordsRef}}</h1>
    <input type="text" v-model="keyWordsRef">
    <h1>{{keyWordsCustomRef}}</h1>
    <input type="text" v-model="keyWordsCustomRef">
  </div>
</template>

<script lang="ts">
// import { trigger } from '@vue/reactivity';
import { defineComponent,customRef,ref } from 'vue'

export default defineComponent({
  setup () {
    const keyWordsRef = ref('');
    const keyWordsCustomRef = useCustomRef('');

    function useCustomRef<T>(value:T,delay = 500) {
      return customRef((track,trigger) => {
        let timeout: number;
        return {
          get() {
            track();
            return value;
          },
          set(newValue:T) {
            clearTimeout(timeout);
            timeout = setTimeout(() => {
              value = newValue;
              trigger();
            },delay);
          },
        };
      });
    }

    return {
      keyWordsRef,
      keyWordsCustomRef,
    };
  },
});
</script>

<style scoped>

</style>
